<style scoped>
.main{
  min-width: 1280px;
}
.logo-img {
  position: absolute;
  top: 6px;
  left: 30px;
}
/* .logo {
  color: #7adefe;
  font-size: 20px;
  font-weight: bold;
  float: unset;
      font-family: Microsoft YaHei;
    font-size: 18px;
    color: #ffffff;
    line-height: 60px;
    float: left;
    margin-left: 70px;
} */
/* .el-menu-demo {
  min-width: 1080px;
  width: 100%;
  position: absolute;
  top: 0;
} */
/* .box-card{
  margin-top: 60px;
  margin-left: 0;
  margin-right: 0;
  background-color: #fff;
  box-shadow: none;
  width: 100%;
  min-height: 730px;
} */
.demo-form-inline{
  min-width: 1280px;
  text-align: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.pagination  {
  margin-top: 15px;
  text-align: center;
  /* margin-left: 150px; */
}
.pagination>>>.el-pagination__total{
  color: #000;
}
.pagination>>>.el-pagination__jump{
  color: #000;
}
/*表格样式*/
.box-card>>>.el-table tr{
  background: #fff;
}
.box-card >>> .el-table__row:hover {
  background: #fdf5e6!important;
}
.box-card >>> .el-table__row--striped {
background: #f3f9ff!important;
}
/*时间组件样式*/
.box-card >>> .el-popper{
  background: #fff;
}
/*设置表格新增的按钮的点击样式*/
.map-dedicated-ele .el-button:focus{
    color: #606266;
    border-color: #dcdfe6;
    background-color: transparent;
}
/*搜索按钮样式*/
.search-btn:focus{
  background: #409eff!important;
    border-color: #409eff!important;
    color: #fff!important;
}
/*dialog样式*/
.detailMessage{
  /* height: 600px; */
  width: 650px;
  margin: 0 auto;
  margin-top: 15vh;
  overflow: unset;
}
.detailMessage>>>.el-dialog{
  margin-top: 0!important;
  margin-bottom: 0!important;
}
.detailMessage >>> .el-dialog__header{
  background-color: rgb(36, 125, 247);
  padding: 10px;
}
.detailMessage >>>.el-dialog__title{
   color: #fff;
 }
.detailMessage >>>.el-dialog__body{
background-color: #fff;
}
.detailMessage >>>.ol-popup-closer:hover{
  cursor: pointer;
}
/*detail table样式*/
.detail-table>>> .el-table__row{
  background-color: #fff!important;
}
.detail-table{
  text-align: center;
}
.detailMessage>>>.el-table {
overflow: auto;
height: 600px;
}
.detail-table>>> thead th{
  text-align: center;
}
.detail-table>>> .el-table__row:hover{
  cursor:pointer;
}
</style>

<template>
  <div class="main">
        <el-header style="min-width:1280px;">
      <!--从这里开始是头部-->
      <!--logo图片-->
      <img class="logo-img" src="../../static/img/logo_01.png" alt="">
      <!--这里是标题文字-->
      <div class="logo">武汉水务监测信息系统</div>

      <!--top-meun-->
      <el-menu :router="true"  class="el-menu-demo" mode="horizontal">
        <el-button @click="exit()" type="text" style="margin-right:2%;float:right;color: #fff;line-height: 34px;display: inline-block;margin-left: 10%;"><img src="../assets/img/exit-01.svg" class="nav-img" style="top: 5px;" />退出</el-button>
        <el-menu-item  index="/App/Moint"  style="margin-left:2%;float:right;"><img src="./../assets/img/ssjc.svg" class="nav-img" />断点管理</el-menu-item>
        <el-menu-item index="/App/RainMonitor" :route="{ path: '/App/MapPage', query: { type: 'rain', }}" style="margin-left:2%;float:right;"><img src="../assets/img/ssjc.svg" class="nav-img" />实时雨量</el-menu-item>
        <el-menu-item index="/App/MapPage" :route="{ path: '/App/MapPage', query: { type: 'mapPage', }}" style="margin-left:2%;float:right;"><img src="../assets/img/ssjc.svg" class="nav-img" />实时监测</el-menu-item>
        <el-menu-item index="/App/indexPage" style="margin-left:2%;float:right;"><img src="../assets/img/ssjc.svg" class="nav-img" />首页</el-menu-item>
      </el-menu>
    </el-header>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>站点监测</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="站点名称">
            <el-input placeholder="站点名称" v-model="param.station"></el-input>
          </el-form-item>
          <el-form-item label="站点类型">
            <el-select placeholder="站点类型" v-model="param.type" >
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item ><!--label="站点类型"-->
            <el-switch v-model="param.error" active-text="重点" inactive-text="非重点">
            </el-switch>
          </el-form-item>
          <el-form-item label="起始时间">
            <el-date-picker v-model="param.beginDate" type="datetime" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            <el-date-picker v-model="param.endDate" type="datetime" placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" type="primary" @click="query()">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table style="width: 100%" v-loading="loading" :stripe='this.stripe' :data="tableData" border>
          <el-table-column prop="YMDHM" label="检测时间" :formatter="dateFormat">
          </el-table-column>
          <el-table-column prop="STNM" label="站点名称" >
          </el-table-column>
          <el-table-column prop="DTYPE" label="站点类型" :formatter="typeFormat">
          </el-table-column>
          <el-table-column prop="ERROR" label="问题类型" :formatter="errorForamt">
          </el-table-column>
          <el-table-column  label="详细数据" width="150px" >
            <template slot-scope="scope">
              <el-button class="btn-detail" icon="el-icon-search" circle  size="mini" @click="showDetail(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination ">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="param.page"
          :page-sizes="[15, 20, 30, 50]" :page-size="param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!--dialog-->
    <el-dialog class="detailMessage" width="650px" title="详细数据" :modal="false" :show-close="false" :append-to-body="true" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
          <a @click="dialogFormVisible = false" class="ol-popup-closer" style="color:#fff;position:absolute;top: 10px;right: 20px;">X</a>
            <el-table class="detail-table" v-loading="loading" :stripe='this.stripe' :data="detailData">
              <el-table-column prop="STNM" label="站点名称" ></el-table-column>
              <el-table-column prop="YMDHM"  label="监测时间" :formatter="dateFormat"></el-table-column>
              <el-table-column prop="LE" label="水位" :formatter="dateLe"></el-table-column>
            </el-table>
    </el-dialog>
  </div>
</template>

<script>
const typeList = [
  {id: '', name: '全部'},
  {id: 'LAKE', name: '湖泊'},
  {id: 'CANAL', name: '港渠'},
  {id: 'HZ', name: '涵闸'},
  {id: 'WATERLOGGING', name: '渍水'},
  {id: 'RIVER', name: '河段'},
  {id: 'RAIN', name: '雨量'},
  {id: 'RESERVOIR', name: '水库'}
]

export default {
  data () {
    return {
      dialogFormVisible: false,
      loading: false,
      stripe: true,
      typeList: typeList,
      param: {
        station: '',
        type: '',
        beginDate: '',
        endDate: '',
        pageSize: 15,
        page: 1,
        error: false
      },
      detailParam: {
        STCD: '',
        DTYPE: '',
        DAY: ''
      },
      tableData: [],
      detailData: [],
      total: 0
    }
  },
  mounted () {
    // console.log(this.detailData)
  },
  created () {
    this.queryData()
  },
  methods: {
    showDetail (val) {
      console.log(val)
      this.detailParam.STCD = val.STCD
      this.detailParam.DTYPE = val.DTYPE
      this.detailParam.DAY = val.YMDHM
      // 将值传入this.detailParam进行带入
      this.dialogFormVisible = true
      this.$postJSON('/ssjc/moint/day', this.detailParam).then(result => {
        console.log(result.data)
        this.detailData = result.data.data
      })
    },
    queryData (param) {
      this.$postJSON('/ssjc/moint/list', param).then(result => {
        console.log(result)
        this.tableData = result.data.result
        this.total = result.data.total
        this.param.currPage = result.data.currPage
        this.param.pageSize = result.data.pageSize
      })
    },
    handleSizeChange (val) {
      this.param.pageSize = val
      this.queryData(this.param)
    },
    handleCurrentChange (val) {
      this.param.page = val
      this.queryData(this.param)
    },
    query () {
      this.queryData(this.param)
    },
    dateLe (val) {
      let le
      if (val.LE === -1) {
        le = '数据丢失'
      } else {
        le = val.LE
      }
      return le
    },
    dateFormat (val) {
      // console.log(val)
      // console.log(this.detailData)
      let date = val.YMDHM
      return date.substring(0, date.length - 3)
    },
    typeFormat (val) {
      let typeVal = val.DTYPE
      let type
      typeList.forEach(element => {
        if (element.id === typeVal) {
          type = element.name
        }
      })
      return type
    },
    errorForamt (val) {
      var error
      // console.log(val.ERROR)
      if (val.ERROR === null) {
        error = '暂无'
      }
      if (val.ERROR === '1') {
        error = '六小时无数据站点'
      }
      return error
    }
  }
}
</script>
